import React, { Component } from 'react';
import CustomForm from '../../../components/CustomForm';
import { Form, Input, Button, message, Radio } from 'antd';
import userStorage from '../../../utils/storage';
import services from '../../../services/api';

class EventAdd extends Component {
  constructor(props) {
    super(props);
    this.state = {
      treeData: [],
      detail: {}
    };
    this.actionType = 'add';
    this.form = null;
    this.api = 'user';
  }

  componentDidMount() {
    this.actionType = this.props.actionType;
    // 修改密码页面
    if (this.props.location.pathname === '/config/changePwd') {
      this.actionType = 'update';
      this.username = userStorage.userInfo.username;
      this.api = 'pwdConfig';
      this.getDetail();
    }
    if (this.props.actionType) {
      if (this.actionType === 'update') {
        this.name = this.props.record.name;
        this.getDetail();
      }
    }
  }
  /**获取详情 */
  getDetail = () => {
    services[this.api].queryOne({ id: this.username }).then(data => {
      if (data.code === 0) {
        this.setState({
          detail: data.data
        });
        this.props.form.setFieldsValue({
          username: data.data.username,
          des: data.data.des,
          right_level: data.data.right_level
        });
      } else {
        message.error(data.msg);
      }
    });
  };

  handleSubmit = () => {
    this.form.validateFields((err, values) => {
      if (!err) {
        const params = {
          name: values.name,
          email: values.email,
          mobile: values.mobile,
          password: values.password,
          retype_password: values.retype_password,
          remark: values.remark
        };
        services[this.api][this.actionType](params).then(data => {
          if (data.code === 0) {
            message.success(data.msg);
            if (this.props.closeModal) {
              this.props.closeModal();
            }
          } else {
            message.error(data.msg);
          }
        });
      }
    });
  };

  handleConfirmBlur = e => {
    const { value } = e.target;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  };

  compareToFirstPassword = (rule, value, callback) => {
    if (value && value !== this.form.getFieldValue('password')) {
      callback('两次输入密码不一致');
    } else {
      callback();
    }
  };

  validateToNextPassword = (rule, value, callback) => {
    if (value && this.state.confirmDirty) {
      this.form.validateFields(['retype_password'], { force: true });
    }
    callback();
  };

  render() {
    const { name, email, mobile, password, retype_password, remark } = this.props.record || {};

    const formItems = [
      {
        label: {
          label: '姓名'
        },
        name: 'name',
        options: {
          initialValue: name,
          rules: [
            { required: true, message: '请输入姓名' },
            { max: 128, message: '最长128个字符' },
            { pattern: /^[\u4E00-\u9FA5_a-zA-Z0-9]+$/, message: '限中英文数字下划线' }
          ]
        },
        component: <Input placeholder='姓名' disabled={this.actionType === 'update'} />
      },
      {
        label: {
          label: '邮箱'
        },
        name: 'email',
        options: {
          initialValue: email,
          rules: [
            { required: true, message: '请输入邮箱' },
            { type: 'email', message: '邮箱格式错误' }
          ]
        },
        component: <Input placeholder='邮箱' disabled={this.actionType === 'update'} />
      },
      {
        label: {
          label: '手机号'
        },
        name: 'mobile',
        options: {
          initialValue: mobile,
          rules: [{ required: true, message: '请输入手机号' }]
        },
        component: <Input placeholder='手机号' disabled={this.actionType === 'update'} />
      },
      {
        label: {
          label: '密码'
        },
        name: 'password',
        options: {
          initialValue: password,
          rules: [
            { required: true, message: '请输入密码' },
            {
              validator: this.validateToNextPassword
            }
          ]
        },
        component: <Input.Password placeholder='密码' disabled={this.actionType === 'update'} />
      },
      {
        label: {
          label: '确认密码'
        },
        name: 'retype_password',
        options: {
          initialValue: retype_password,
          rules: [
            { required: true, message: '请确认密码' },
            {
              validator: this.compareToFirstPassword
            }
          ]
        },
        component: (
          <Input.Password
            placeholder='确认密码'
            disabled={this.actionType === 'update'}
            onBlur={this.handleConfirmBlur}
          />
        )
      },
      {
        label: {
          label: '备注'
        },
        name: 'remark',
        options: {
          initialValue: remark,
          rules: [
            { max: 256, message: '最长256个字符' }
          ]
        },
        component: <Input placeholder='备注' />
      }
    ];

    return (
      <CustomForm
        {...this.props}
        closeModal={this.props.closeModal}
        createForm={ref => (this.form = ref)}
        formItems={formItems}
        onHandleSubmit={this.handleSubmit}
      />
    );
  }
}

export default EventAdd;
